<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base herf="<%=basePath%>">
    <link rel="shortcut icon" href="<%=basePath%>static/css/logo.png">
    <link rel="stylesheet" href="<%=basePath%>static/css/iconfont.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/global.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/swiper.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/styles.css">
    <script src="<%=basePath%>static/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="<%=basePath%>static/js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="<%=basePath%>static/js/swiper.min.js" charset="UTF-8"></script>
    <script src="<%=basePath%>static/js/global.js" charset="UTF-8"></script>
    <script src="<%=basePath%>static/js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <script src="<%=basePath%>static2/assets/layer/layer.js" type="text/javascript"></script>
    <script src="<%=basePath%>static2/assets/laydate/laydate.js" type="text/javascript"></script>
    <script type="text/javascript">
        //查询到所有的商品信息

        $(document).ready(function () {
            var theme = '<%=session.getAttribute("username")%>';
            //alert(theme);
            if (theme == null || theme == "null") {
                $("#dengluzhuce").show();
                $("#tuichudenglu").hide();
                $("#xianshi").hide();
            } else {
                $("#dengluzhuce").hide();
                $("#tuichudenglu").show();
            }

        });

        function openadd(title) {
            layer.open({
                type: 2,
                skin: 'layui-layer-demo', //样式类名
                title: '书店公告',
                closeBtn: 0, //不显示关闭按钮
                anim: 2,
                area: ['700px', '400px'],
                shadeClose: true, //开启遮罩关闭
                content: "${pageContext.request.contextPath}/jsp/notice.jsp?title=" + title
            });
        }

    </script>
    <title>卓越图书网</title>
    <base href="<%=basePath%>"/>
</head>
<body>
<!-- 顶部tab -->
<div class="tab-header">
    <div class="inner">
        <div class="pull-left">
            <div class="pull-left">嗨，欢迎来到<span class="cr">卓越图书网</span>
                <span id="xianshi">尊敬的${sessionScope.username}</span>
            </div>
        </div>
        <div class="pull-right" id="dengluzhuce">
            <a href="<%=basePath%>jsp/login.jsp"><span class="cr">登录</span></a>
            <a href="<%=basePath%>jsp/login.jsp?p=register">注册</a>
        </div>
        <div class="pull-right" id="tuichudenglu">
            <a href="<%=basePath%>web/getorders"><span class="cr">个人中心</span></a>
            <a href="<%=basePath%>jsp/login.jsp"><span class="cr">退出登录</span></a>
        </div>
    </div>
</div>
<!-- 搜索栏 -->
<div class="top-search">
    <div class="inner">
        <a class="logo" href="<%=basePath%>jsp/homePage.jsp"><img src="<%=basePath%>static/images/icons/logo.png"
                                                                  alt="卓越图书网" class="cover"></a>
        <div class="search-box">
            <form action="web/DimSearch" class="input-group">
                <input name=goods_dimSearch placeholder="Ta们都在搜卓越图书网" type="text">
                <span class="input-group-btn">
						<button type="submit">
							<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
						</button>
					</span>
            </form>
            <p class="help-block text-nowrap">
                <a href="">海的女儿</a>
                <a href="">哈利波特</a>
                <a href="">活着</a>
                <a href="">名侦探柯南</a>
                <a href="">艺术博物馆</a>
            </p>
        </div>
        <div class="cart-box">
            <a href="<%=basePath%>web/SelectShopCart" class="cart-but">
                <i class="iconfont icon-shopcart cr fz16"></i> 购物车
            </a>
        </div>
    </div>
</div>
<!-- 首页导航栏 -->
<div class="top-nav bg3">
    <div class="nav-box inner">
        <div class="all-cat">
            <div class="title"><i class="iconfont icon-menu"></i> 全部分类</div>
            <div class="cat-list__box">
                <div class="cat-box">
                    <div class="title">
                        <i class="iconfont icon-skirt ce"></i> 童书
                    </div>
                    <ul class="cat-list clearfix">
                        <li>冒险</li>
                        <li>益智</li>
                        <li>解密</li>
                        <li>教育</li>
                    </ul>
                    <div class="cat-list__deploy">
                        <div class="deploy-box">
                            <div class="genre-box clearfix">
                                <span class="title">冒险：</span>
                                <div class="genre-list">
                                    <a href="">哈利波特</a>
                                    <a href="">海王</a>
                                    <a href="">查理王子</a>
                                </div>
                            </div>
                            <div class="genre-box clearfix">
                                <span class="title">益智：</span>
                                <div class="genre-list">
                                    <a href="">齐先生喵小姐</a>
                                    <a href="">漫画中国</a>

                                </div>
                            </div>
                            <div class="genre-box clearfix">
                                <span class="title">教育：</span>
                                <div class="genre-list">
                                    <a href="">曹文轩</a>
                                    <a href="">活着</a>
                                </div>
                            </div>
                            <div class="genre-box clearfix">
                                <span class="title">解密：</span>
                                <div class="genre-list">
                                    <a href="">名侦探柯南</a>
                                    <a href="">福尔摩斯</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cat-box">
                    <div class="title">
                        <i class="iconfont icon-fushi ce"></i> 文艺
                    </div>
                    <ul class="cat-list clearfix">
                        <li>博物馆</li>
                        <li>艺术</li>
                        <li>传记</li>
                    </ul>
                    <div class="cat-list__deploy">
                        <div class="deploy-box">
                            <div class="genre-box clearfix">
                                <span class="title">博物馆：</span>
                                <div class="genre-list">
                                    <a href="">艺术博物馆</a>
                                </div>
                            </div>
                            <div class="genre-box clearfix">
                                <span class="title">艺术：</span>
                                <div class="genre-list">
                                    <a href="">加德纳艺术通史</a>
                                </div>
                            </div>
                            <div class="genre-box clearfix">
                                <span class="title">传记：</span>
                                <div class="genre-list">
                                    <a href="">周恩来传</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cat-box">
                    <div class="title">
                        <i class="iconfont icon-bao ce"></i> 小说
                    </div>
                    <ul class="cat-list clearfix">
                        <li>科幻</li>
                        <li>推理</li>
                    </ul>
                    <div class="cat-list__deploy">
                        <div class="deploy-box">
                            <div class="genre-box clearfix">
                                <span class="title">科幻：</span>
                                <div class="genre-list">
                                    <a href="">三体</a>
                                    <a href="">流浪地球</a>
                                </div>
                            </div>
                            <div class="genre-box clearfix">
                                <span class="title">推理：</span>
                                <div class="genre-list">
                                    <a href="">告别</a>
                                    <a href="">第十年的情人节</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="nva-list">
            <a href="<%=basePath%>jsp/homePage.jsp">
                <li class="active">首页</li>
            </a>
        </ul>
        <div class="user-info__box">
            <div class="login-box">
                <div class="avt-port">
                    <img src="<%=basePath%>static/css/logo.png" alt="欢迎来到卓越图书网" class="cover b-r50">
                </div>
                <!-- 已登录 -->
                <div class="name c6">Hi~ <span class="cr">${user.username}</span></div>
            </div>
            <div class="tags">
                <div class="tag"><i class="iconfont icon-real fz16"></i> 品牌正品</div>
                <div class="tag"><i class="iconfont icon-credit fz16"></i> 信誉认证</div>
                <div class="tag"><i class="iconfont icon-speed fz16"></i> 当天发货</div>
                <div class="tag"><i class="iconfont icon-tick fz16"></i> 人工质检</div>
            </div>
        </div>
    </div>
</div>
<!-- 顶部轮播 -->
<div class="swiper-container banner-box">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><a href=""><img src="<%=basePath%>static/images/temp/shouye1.jpg" class="cover"></a>
        </div>
        <div class="swiper-slide"><a href=""><img src="<%=basePath%>static/images/temp/shouye2.jpg" class="cover"></a>
        </div>
        <div class="swiper-slide"><a href=""><img src="<%=basePath%>static/images/temp/shouye3.jpg" class="cover"></a>
        </div>
        <div class="swiper-slide"><a href=""><img src="<%=basePath%>static/images/temp/shouye4.jpg" class="cover"></a>
        </div>
        <div class="swiper-slide"><a href=""><img src="<%=basePath%>static/images/temp/shouye5.jpg" class="cover"></a>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<!-- 首页楼层导航 -->
<nav class="floor-nav visible-lg-block">
    <span class="scroll-nav active">爆款推荐</span>
    <span class="scroll-nav">童书</span>
    <span class="scroll-nav">文艺</span>
    <span class="scroll-nav">小说</span>
</nav>
<!-- 楼层内容 -->
<div class="content inner" style="margin-bottom: 40px;">
    <section class="scroll-floor floor-1 clearfix">
        <div class="pull-left">
            <div class="floor-title">
                <i class="iconfont icon-tuijian fz16"></i> 爆款推荐
                <a href="" class="more"><i class="iconfont icon-more"></i></a>
            </div>
            <div class="con-box">
                <a class="left-img hot-img" href="">
                    <img src="<%=basePath%>static/images/floor4.jpg" alt="" class="cover">
                </a>
                <div class="right-box hot-box">
                    <c:forEach items="${goodsList}" var="good" begin="0" end="5">
                        <a href="web/SelectGoodsMsgById?goodid=${good.goodsId}" class="floor-item">
                            <div class="item-img hot-img">
                                <img src="<%=basePath%>${good.goodsImg}" alt="${good.goodsTitle }" class="cover">
                            </div>
                            <div class="price clearfix">
                                <span class="pull-left cr fz16">￥${good.price }</span>
                                <span class="pull-right c6">售价</span>
                            </div>
                            <div class="name ep" title="${good.goodsTitle }">${good.goodsName }</div>
                        </a>
                    </c:forEach>
                </div>
            </div>
        </div>
        <div class="pull-right">
            <div class="floor-title">
                <i class="iconfont icon-horn fz16"></i> 平台公告
            </div>
            <div class="con-box">
                <div class="notice-box bgf5">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">

                            <c:forEach items="${noticeList}" var="notice">
                                <span class="swiper-slide ep"
                                      onclick="openadd('${notice.title}')"> ${notice.title}</span>
                            </c:forEach>
                        </div>
                    </div>
                </div>
                <div class="buts-box bgf5">
                    <div class="but-div">
                        <a href="">
                            <i class="but-icon"></i>
                            <p>物流查询</p>
                        </a>
                    </div>
                    <div class="but-div">
                        <a href="">
                            <i class="but-icon"></i>
                            <p>热卖专区</p>
                        </a>
                    </div>
                    <div class="but-div">
                        <a href="">
                            <i class="but-icon"></i>
                            <p>满减专区</p>
                        </a>
                    </div>
                    <div class="but-div">
                        <a href="">
                            <i class="but-icon"></i>
                            <p>折扣专区</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <c:forEach items="${cateList}" var="cate">
        <section class="scroll-floor floor-4">
            <div class="floor-title">
                <i class="iconfont icon-kid fz16"></i> ${cate.categoryName}
            </div>
            <div class="con-box">
                <a class="left-img hot-img" href="">
                    <img src="<%=basePath%>${cate.imgPath}" alt="" class="cover">
                </a>
                <div class="right-box hot-box">
                    <c:forEach items="${goodsList}" var="good">
                        <c:if test="${good.goodsCateId eq cate.id}">
                            <a href="web/SelectGoodsMsgById?goodid=${good.goodsId}" class="floor-item">
                                <div class="item-img hot-img">
                                    <img src="<%=basePath%>${good.goodsImg}" alt="${good.goodsTitle }" class="cover">
                                </div>
                                <div class="price clearfix">
                                    <span class="pull-left cr fz16">￥${good.price }</span>
                                    <span class="pull-right c6">售价</span>
                                </div>
                                <div class="name ep" title="${good.goodsTitle }">${good.goodsName }</div>
                            </a>
                        </c:if>

                    </c:forEach>
                </div>
            </div>
        </section>
    </c:forEach>

</div>
<script>
    $(document).ready(function () {
        // 顶部banner轮播
        var banner_swiper = new Swiper('.banner-box', {
            autoplayDisableOnInteraction: false,
            pagination: '.banner-box .swiper-pagination',
            paginationClickable: true,
            autoplay: 5000,
        });
        // 新闻列表滚动
        var notice_swiper = new Swiper('.notice-box .swiper-container', {
            paginationClickable: true,
            mousewheelControl: true,
            direction: 'vertical',
            slidesPerView: 10,
            autoplay: 2e3,
        });
        // 楼层导航自动 active
        $.scrollFloor();
        // 页面下拉固定楼层导航
        $('.floor-nav').smartFloat();
        $('.to-top').toTop({position: false});
    });
</script>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item">
            <a href="udai_welcome.jsp" class="r-item-hd">
                <i class="iconfont icon-user"></i>
                <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a href="shopcart.jsp" class="r-item-hd">
                <i class="iconfont icon-cart" data-badge="10"></i>
                <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
            </a>
        </li>
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
</div>
<!-- 底部信息 -->
<div class="footer">
    <div class="footer-tags">
        <div class="tags-box inner">
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_1.gif" alt="厂家直供">
            </div>
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_2.gif" alt="一件代发">
            </div>
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_3.gif" alt="美工活动支持">
            </div>
            <div class="tag-div">
                <img src="<%=basePath%>static/images/icons/footer_4.gif" alt="信誉认证">
            </div>
        </div>
    </div>
    <div class="footer-links inner">
    </div>
    <div class="copy-box clearfix">
        <!-- 版权 -->
        <p class="copyright">
            ©卓越图书网 版权所有，并保留所有权利<br>
            河南省郑州市中原区科学大道100号
        </p>
        </p>
    </div>
</div>
</body>
</html>
